<template>
  <el-form
    ref="form1"
    :model="models"
    label-width="120px"
    :rules="rules"
    label-suffix=":"
    size="small"
  >
    <el-tabs type="border-card" @tab-click="handleTabClick" v-model="tabActive">
      <el-tab-pane label="基本配置" name="config">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="名称" prop="model.name">
              <el-input v-model="models.model.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编码">
              <el-input v-model="models.model.code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="版本号" prop="model.version">
              <el-input v-model="models.model.version"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作流应用">
              <el-select v-model="models.model.definitionId">
                <el-option
                  v-for="item in controlData.workflowApps"
                  :key="item.definitionId"
                  :label="item.appName + '（' + item.appCode + '）'"
                  :value="item.definitionId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设为当前版本">
              <el-switch v-model="models.model.isCurrent"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用">
              <el-switch v-model="models.model.isEnabled"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="审批页面" name="page">
        <el-table
          class="table-no-padding"
          :data="models.workflowPages"
          :span-method="getSpan"
          border
          style="width: 100%"
        >
          <el-table-column fixed prop="pageType" label="类型" width="100">
            <template slot-scope="scope">{{scope.row.pageType | enums(controlData.pageTypeOption)}}</template>
          </el-table-column>
          <el-table-column prop="activityName" label="环节" width="200"></el-table-column>
          <el-table-column prop="pageId" label="表单页面" width="300px">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.pageId"
                value-key="value"
                reserve-keyword
                filterable
                clearable
                placeholder="请输入关键词"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="item in controlData.pages"
                  :key="item.pageId"
                  :label="item.name"
                  :value="item.pageId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="isUseNew" label="自动应用新版" width="120">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isUseNew"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="memo" label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.alias" size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="60">
            <template slot-scope="scope">
              <el-button
                @click="reviewPage(scope.row)"
                type="text"
                size="small"
                v-if="scope.row.pageId"
              >预览</el-button>
            </template>
          </el-table-column>
        </el-table>
        
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
import _ from "lodash";
import request from "@/utils/request";

export default {
  name: "smart-workflow-create",
  props: {
    models: Object,
    controlData: Object,
  },
  data() {
    return {
      tabActive: "config",
      rules: {
        "model.name": [{ required: true }],
        "model.definitionId": [{ required: true }],
      },
    };
  },
  methods: {
    loadWorkflowPages(val) {
      if (val) {
        request({
          url: "/smartform/smartWorkflow/getPages",
          method: "post",
          data: {
            definitionId: this.models.model.definitionId,
            workflowId: this.models.model.workflowId,
          },
        }).then((r) => {
          this.models.workflowPages = r;
        });
      }
    },
    handleTabClick(tab, event) {
      this.tabActive = tab.name;
    },
    getSpan({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex < 2) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else if (rowIndex == 2) {
          return {
            rowspan: this.models.workflowPages.length - 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    reviewPage(row) {
      window.open(
        `/smartform/render?pageId=${row.pageId}&_r=${new Date().getTime()}`
      );
    },
  },
  created() {
    this.loadWorkflowPages(this.models.model.definitionId);
  },
  watch: {
    "models.model.definitionId": function (val) {
      if (val) {
        this.loadWorkflowPages(val);
      }
    },
  },
};
</script>

<style>
</style>